<template>
  <view class="login">
    <!-- 页面装饰图片 -->
    <image class="img-a" src="@/static/bg1.png"></image>
    <image class="img-b" src="@/static/bg2.png"></image>
    <!-- 标题 -->
    <view class="title-1">欢迎回来</view>
    <view class="title-2">erp系统</view>
    <view class="form-input">
      <up-form labelPosition="left" :model="model" :rules="rules" ref="uForm" :borderBottom="false">
        <up-form-item prop="username" :borderBottom="false">
          <view class="item">
            <view class="item-icon">
              <up-icon name="account" size="25"></up-icon>
            </view>
            <view class="item-input">
              <up-input v-model="model.username" placeholder="请输入手机号" border="none"></up-input>
            </view>
          </view>
        </up-form-item>
        <up-form-item prop="password" :borderBottom="false">
          <view class="item">
            <view class="item-icon">
              <up-icon name="lock" size="25"></up-icon>
            </view>
            <view class="item-input">
              <up-input v-model="model.password" type="password" placeholder="请输入密码" border="none"></up-input>
            </view>
          </view>
        </up-form-item>
      </up-form>
      <view style="margin-top: 50rpx;">
        <up-button type="primary" shape="circle" text="登录" :loading="loading" loadingText="登录中"
          @click="submit"></up-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useLoginStore } from '../../stores/login';
const LoginStore = useLoginStore()
const loading = ref(false)
const model = reactive({
  username: 'yzm',
  password: '123456',
})
const rules = {
  username: {
    type: 'string',
    required: true,
    message: '请填写手机号',
    trigger: ['blur', 'change']
  },
  password: {
    type: 'string',
    required: true,
    message: '请填写密码',
    trigger: ['blur', 'change']
  }
}

const uForm = ref(null)
function submit() {
  loading.value = true
  if (uForm.value) {
    uForm.value.validate().then(res => {
      LoginStore.Login(model).then(res => {
        uni.$u.toast('校验通过')
        uni.navigateTo({
          url: '/pages/home/index'
        });
        loading.value = false

      }).catch(err => {
        console.log('登录失败')
        loading.value = false
      })
    })
  }

}

</script>

<style lang="scss" scoped>
.login {
  position: relative;
  height: 100%;
  padding: 40% 50rpx 0;
  box-sizing: border-box;

  .img-a {
    position: absolute;
    width: 80%;
    top: -150rpx;
    right: 0;
  }

  .img-b {
    position: absolute;
    width: 50%;
    bottom: 0%;
    left: -50rpx;
  }

  .title-1 {
    font-size: 46rpx;
    color: #000;
    font-weight: bold;
  }

  .title-2 {
    margin-top: 20rpx;
    font-size: 32rpx;
    color: #aaaaaa;
  }

  .form-input {
    margin-top: 100rpx;

    .item {
      display: flex;
      align-items: center;
      background-color: #fff;
      height: 80rpx;
      width: 100%;
      padding: 0 35rpx;
      border-radius: 200rpx;
      box-sizing: border-box;

      .item-icon {
        display: flex;
        align-items: center;
        width: 60rpx;
        margin-right: 20rpx;
        border-right: 2rpx solid #dedede;

        .image {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .item-input {
        flex: 1;
      }
    }

    .item-code {
      width: 100%;
      display: flex;

      .item {
        flex: 2;
        display: flex;
        align-items: center;
        background-color: #fff;
        height: 80rpx;
        padding: 0 35rpx;
        border-radius: 200rpx;

        .item-icon {
          display: flex;
          align-items: center;
          width: 60rpx;
          margin-right: 20rpx;
          border-right: 2rpx solid #dedede;

          .image {
            width: 40rpx;
            height: 40rpx;
          }
        }
      }

      .code-input {
        flex: 1;
        height: 80rpx;

        image {
          height: 100%;
          width: 100%;
        }
      }
    }

  }
}
</style>